<template>
  <a-modal
    title="医生注册"
    :open="open"
    :centered="true"
    ok-text="注册"
    cancel-text="取消"
    :mask-closable="false"
    @ok="handleOk"
    @cancel="handleCancel"

  >
    <a-form
      :model="model"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 16 }"
      :rules="rules"
      ref="formRef"
    >
      <a-form-item
        name="name"
      >
        <template #label>
          <span class="text-[18px]">姓名</span>
        </template>
        <a-input v-model:value="model.name" placeholder="请输入姓名"/>
      </a-form-item>
      <a-form-item
        name="account"
      >
        <template #label>
          <span class="text-[18px]">账号</span>
        </template>
        <a-input v-model:value="model.account" placeholder="请输入账号"/>
      </a-form-item>
      <a-form-item
        name="passwd"
      >
        <template #label>
          <span class="text-[18px]">密码</span>
        </template>
        <a-input-password v-model:value="model.passwd" placeholder="请输入密码"/>
      </a-form-item>
    </a-form>

  </a-modal>
</template>

<script>
import {reactive, ref, watch} from "vue";
import axios from "axios";
import API_BASE_URL from "../../config";
import {message} from "ant-design-vue";

export default {
  setup(props, {emit}) {
    const open = ref(false)

    const model = reactive({
      name: '',
      account: '',
      passwd: ''
    })


    const rules = reactive({
      name: [
        {
          required: true,
          message: '请输入姓名',
          trigger: 'blur'
        }
      ],
      account: [
        {
          required: true,
          message: '请输入账号',
          trigger: 'blur',
        }
      ],
      passwd: [
        {
          required: true,
          message: '请输入至少六位密码',
          trigger: 'blur',
          pattern: '.{6,}',
        }
      ]
    })


    const showModal = () => {
      open.value = true
    }
    const handleCancel = () => {
      open.value = false
      //清空输入
      model.name = ''
      model.card_number = ''
      model.passwd = ''
    }
    const formRef = ref(null)
    const handleOk = () => {
      formRef.value.
      validate().then((ars) => {
        if (ars){
          let formData = new FormData()
          formData.append('name', model.name)
          formData.append('account', model.account)
          formData.append('passwd', model.passwd)

          axios.post(`${API_BASE_URL}/doctor/add`, formData).then((res) => {
            if (res.data.code === 200) {
              message.success('注册成功')
              //清空输入
              model.name = ''
              model.account = ''
              model.passwd = ''
              open.value = false
            }
            if (res.data.code === 409){
              message.error('账号已存在')
            }
          })
        }

      }).catch(err => {
        console.log('医生表单输入错误',err)
      })





    }

    return {
      open,
      model,
      showModal,
      rules,
      formRef,
      handleCancel,
      handleOk,


    }
  }
}


</script>

<style scoped>

</style>
